<template>
	<view class="xk-video" :style="{width: videoWidth + 'rpx', height: videoHeight + 'rpx'}">
		<video class="video-comp" object-fit="cover" id="xkVideo"
			:style="{width: videoWidth + 'rpx', height: videoHeight + 'rpx'}"
			:src="src"
			:show-play-btn="false"
			:show-center-play-btn="false"
			:show-progress="showControls"
			:show-fullscreen-btn="false"
			:controls="showControls"
			@fullscreenchange="fullChange"
			@ended="videoEnd"
			@click="clickVideo">
		</video>
		<image v-if="!isPlay" class="play-icon" src="/static/play.png" @click.stop="playVideo"></image>
	</view>
</template>

<script>
	export default {
		name:"xk-video",
		props: {
			vertical: {
				type: Boolean,
				default: true,
			},
			src: String
		},
		watch:{
			vertical(val, oldVal){
				console.log('222222',val, oldVal)
				if(val){
					this.videoWidth = 500;
					this.videoHeight = 300;
				}else{
					this.videoWidth = 300;
					this.videoHeight = 500;
				}
			}
		},
		created(){
			if(this.vertical){
				this.videoWidth = 500;
				this.videoHeight = 300;
			}else{
				this.videoWidth = 300;
				this.videoHeight = 500;
			}
		},
		data() {
			return {
				videoWidth: 500,
				videoHeight: 300,
				showControls: false,
				isPlay: false,
				isFull: false,
				videoControll: null
			};
		},
		methods:{
			playVideo(){
				if(!this.videoControll){
					this.videoControll = uni.createVideoContext('xkVideo', this)
				}
				console.log("12333=====22",this.videoControll)
				this.isPlay = true;
				this.videoControll.play();
			},
			videoEnd(){
				this.isPlay = false;
				if(!this.videoControll){
					this.videoControll = uni.createVideoContext('xkVideo', this)
				}
				this.videoControll.seek(0);
			},
			fullChange(e){
				console.log('fullchannge', e)
				if(!e.detail.fullScreen){
					this.showControls = false;
					this.isFull = false;
				}
			},
			clickVideo(){
				console.log('ccccccvideo')
				if(!this.videoControll){
					this.videoControll = uni.createVideoContext('xkVideo', this)
				}
				if(this.isFull && this.isPlay){
					//全屏播放中
					console.log('全屏播放中')
					this.videoControll.exitFullScreen()
					this.showControls = false;
					this.isFull = false;
					this.isPlay = false;
					this.videoControll.pause();
					this.videoControll.seek(0)
				}else if (this.isFull){
					//全屏暂停
					console.log('全屏暂停')
					this.videoControll.exitFullScreen()
					this.showControls = false;
					this.isFull = false;
					this.isPlay = false;
					this.videoControll.pause();
					this.videoControll.seek(0)
				}else if(this.isPlay){
					// 非全屏播放中
					console.log('非全屏播放中')
					this.videoControll.requestFullScreen()
					this.isFull = true;
					this.showControls = true;
				}else{
					// 非全屏暂停
					console.log('非全屏暂停')
				}
			}
		}
	}
</script>

<style lang="scss">
.xk-video{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	.video-comp{
		position: absolute;
		top: 0;
		left: 0;
	}
	.play-icon{
		width: 100rpx;
		height: 100rpx;
		position: relative;
		z-index: 9;
	}
}

</style>
